<template>
  <div class="changeCard">
    <el-dialog v-model="dialogFormVisible" title="修改层级">
      <el-input-number v-model="index" :min="0" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="back">返回</el-button>
          <el-button type="primary" @click="submit"> 提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import request from "../axios/index";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "ChangeIndex",
  setup(props, { emit }) {
    //定义输入框内容
    let index: any = ref(0);

    const router = useRouter();
    //获取路由传递的ID值
    const id: any = router.currentRoute.value.query.id;
    //获取路由传递的Index值
    index.value = router.currentRoute.value.query.index;

    const dialogFormVisible = ref(true);
    //返回上一级
    function back() {
      router.back();
    }
    //提交
    function submit() {
      ElMessageBox.confirm("是否确认修改该信息的层级")
        .then(() => {
          request
            .post("/admin/notice/changeIndex", {
              noticeId: id,
              noticeIndex: index.value,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                emit("reFresh", null);
                back();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
                back();
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消修改");
        });
    }

    watch(
      () => dialogFormVisible.value,
      (newValue, oldValue) => {
        if (!newValue) {
          back();
        }
      }
    );

    return {
      index,
      dialogFormVisible,
      back,
      submit,
    };
  },
};
</script>

<style scoped>
.changeCard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #fff;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>